

<!--
 * @Description:: 请补充填写
 * @Version: 1.0
 * @Author: 小白
 * @Date: 2022-04-14 14:26:46
 * @LastEditors: 小白
 * @LastEditTime: 2025-10-12 14:34:23
 * @FilePath: /tmsadmin/src/views/home/components/tablenopage.vue
-->

<template>
  <el-table show-summary :summary-method="getSummaries" :data="props.tableData" v-loading="props.loading" style="width: 100%"
    :header-cell-style="{ background: '#FAFAFA', color: 'rgba(0,0,0,0.85)' }"
    @selection-change="handleSelectionChange">
    <template #empty>
      <div class="v2-table__empty-data v2-table__empty-border" style="width: 100%">
        <div class="v2-table__empty-default">
          <div style="padding-top: 40px; height: 50px">
            <i class="icon ion-ios-briefcase-outline" style="font-size: 60px" />
          </div>
          <span>暂无数据</span>
        </div>
      </div>
    </template>
    <el-table-column type="selection" fixed="left" align="center" width="50" />
    <el-table-column v-for="item in tableColumns" :key="item.id" :fixed="item.fixed" :prop="item.prop"
      :label="item.title" :min-width="item.minwidth" :sortable="item.sortable" :filters="item.filters"
      :align="item.align" :filter-method="item.filters && filterHandler" :show-overflow-tooltip="true">
      <template #default="scope">
        <template v-if="item.prop == 'action'">
          
          <el-button size="small" v-if="scope.row.disabled" type="warning" @click="scope.row.disabled = false">
            编辑
          </el-button>
          <el-button size="small" v-if="!scope.row.disabled" type="success" @click="showEdit(scope.row, '编辑')">
            保存
          </el-button>
          <el-button size="small" type="danger" @click="orderfg(scope.row)">
            商品拆分
          </el-button>
        </template>
        <template v-if="item.prop == 'index'">
          {{ scope.$index + 1 }}
        </template>
        <template v-else-if="item.prop == 'batchNo'">
          <el-input :disabled="scope.row.disabled" v-model="scope.row[item.prop]" size="small" style="width: 100px" ></el-input>
        </template>
        <template v-else-if="item.prop == 'startDate'">
          <el-input  :disabled="scope.row.disabled" v-model="scope.row[item.prop]" size="small" style="width: 100px" ></el-input>
        </template>
        <template v-else-if="item.prop == 'endDate'">
          <el-input :disabled="scope.row.disabled" v-model="scope.row[item.prop]" size="small" style="width: 100px" ></el-input>
        </template>
        <template v-else>
          {{ scope.row[item.prop] }}
        </template>
      </template>
    </el-table-column>
  </el-table>
</template>
<script lang="ts" setup>
import { REQUEST } from "@/api/request"
import { ElMessage } from "element-plus"
import { ref } from "vue"
const emits = defineEmits(['change', 'edit', 'ok', 'selectionChange',])
const props = defineProps({
  tableData: { type: Array, default: [] },
  tableColumns: { type: Array, default: [] },
  loading: { type: Boolean, default: false }
})
const disabled = ref(false)
const filterHandler = (value: any, row: any, column: any) => {
  const property = column.property
  return row[property] === value
}
const handleSelectionChange = (row: any) => {
  emits('selectionChange', row)
}
const orderfg = (row:any)=>{
  emits('edit',{row,title:'商品拆分'})
}
const getSummaries = (param:any)=>{
        const { columns, data } = param;
        const sums:any = [];
        columns.forEach((column, index) => {
          const values = data.map(item => Number(item[column.property]));
          // if (!values.every(value => isNaN(value))) {
          if(index == 3){
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += ' ';
          }else if(index == 1){
            sums[index] = '总数';
            return;
          } else {
            sums[index] = '';
          }
        });
        return sums;
}
const showEdit =(row:any)=>{
  REQUEST.POST('EDITPRODUCT', {
       batchList:[
        {
        id: row.id,
        productName: row.productName,
        batchNo: row.batchNo,
        startDate: row.startDate,
        endDate: row.endDate,
        }
       ]
      }).then((res: any) => {
        if (res.status == 200) {
          emits('ok')
          ElMessage.success('编辑成功!')
        } else {
          ElMessage.warning(res.message)
        }
      })
}
</script>

<style lang="scss" scoped>
.pagination {
  display: flex;
  justify-content: space-between;
  align-self: center;
  margin-top: 20px;
}
</style>
